<template>
       <div class="index-wrap">
           <div class="container">
               <div class="swiper-box">
<!--                   <div v-swiper:mySwiper="swiperOption">-->
<!--                       <div class="swiper-wrapper">-->
<!--                           <div class="swiper-slide" :key="indexSlide" v-for="(item,indexSlide) in slideList" >-->
<!--                               <a href="'/product/'+item.id"><img :src="item.img"></a>-->
<!--                           </div>-->
<!--                       </div>-->
<!--                       &lt;!&ndash; 分页器 &ndash;&gt;-->
<!--                       <div class="swiper-pagination" slot="pagination"></div>-->
<!--                       &lt;!&ndash; 如果需要导航按钮 &ndash;&gt;-->
<!--                       <div class="swiper-button-prev" slot="swiper-button-prev"></div>-->
<!--                       <div class="swiper-button-next" slot="swiper-button-next"></div>-->
<!--                       &lt;!&ndash; 如果需要滚动条 &ndash;&gt;-->
<!--                       <div class="swiper-scrollbar"></div>-->
<!--                   </div>-->
                   <swiper ref="mySwiper" :options="swiperOptions">
                       <swiper-slide :key="indexSlide" v-for="(item,indexSlide) in slideList">
                           <a :href="'/product/'+item.id"><img :src="item.img"></a>
                       </swiper-slide>
                       <div class="swiper-pagination" slot="pagination"></div>
                   </swiper>
               </div>
               <div class="abs-box"></div>
               <div class="abs-banner"></div>
               <div class="product-box"></div>
           </div>
           <service-bar></service-bar>
       </div>
</template>

<script>
    import ServiceBar from "./components/ServiceBar";
    import { Swiper, SwiperSlide,directive } from 'vue-awesome-swiper';
    import 'swiper/swiper-bundle.css';
    export default {
        name: "index",
        components: {
            ServiceBar,
            Swiper,
            SwiperSlide
        },
        computed:{
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        },
        directives: {
            swiper: directive
        },
        data(){
            return{
                slideList:[
                    {id:"42",img:"/imgs/slider/slide-1.jpg"},
                    {id:"45",img:"/imgs/slider/slide-2.jpg"},
                    {id:"46",img:"/imgs/slider/slide-3.jpg"},
                    {id:"",img:"/imgs/slider/slide-4.jpg"},
                    {id:"",img:"/imgs/slider/slide-5.jpg"}
                ],
                swiperOptions:{
                    loop : true,
                    autoplay:true,
                    effect : 'cube',
                    cubeEffect: {
                        slideShadows: true,
                        shadow: true,
                        shadowOffset: 100,
                        shadowScale: 0.6
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    pagination: {
                        el: '.swiper-pagination'
                    }
                }
            }
        },

        mounted() {
            console.log('Current Swiper instance object', this.swiper)
            this.swiper.slideTo(3, 1000, false)
            // this.mySwiper.slideTo(3, 1000, false)

        },
        methods:{
        }

    }
</script>

<style scoped lang="scss">
    .index-wrap{
        .swiper-box{
            width: 100%;
            .swiper-container{
                height: 451px;
                --swiper-theme-color: #ff6600;
                --swiper-pagination-color: #00ff33;/* 两种都可以 */
                img{
                    width: 100%;
                }
            }
        }
    }
</style>
